<template>
  <div>
    <div ref="legend" style="width: 400px;height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted () {
    this.setLegend()
  },
  methods: {

    setLegend () {
      function genData (count) {
        // prettier-ignore
        const nameList = [
          '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        const legendData = [];
        const seriesData = [];
        for (let i = 0; i < count; i++) {
          const name =
            Math.random() > 0.65
              ? makeWord(4, 1) + '·' + makeWord(3, 0)
              : makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          });
        }
        return {
          legendData: legendData,
          seriesData: seriesData
        };
        function makeWord (max, min) {
          const nameLen = Math.ceil(Math.random() * max + min);
          const name = [];
          for (let i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
          }
          return name.join('');
        }
      }

      const data = genData(50);
      console.log(data);

      const obj = echarts.init(this.$refs.legend)
      // 给初始化好的对象,配置选
      const option = {
        title: {
          text: "标题"
        },
        // 指明当前的数据是什么类型的
        legend: {
          // 普通的图例,scroll
          type: 'plain',
          itemWidth: 40,
          itemStyle: {
            color: "red"
          },
          // icon: "rect"
          // 专门用于折线图
          lineStyle: {
            color: "red",
            width: 2,
            type: 'dashed',
            cap: 'round',
            inactiveWidth: 4
          },
          // 图例关闭时候的颜色
          inactiveColor: "#ccc"
        },
        // 柱状图
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        // 系列,系列里边有多个数据
        series: [
          {
            name: '销--量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            type: 'line',
            data: [6, 22, 31, 13, 11, 27]
          },
          {
            name: '产量',
            type: 'line',
            data: [10, 24, 33, 11, 15, 29]
          }
        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
